<template>
  <div class="container">
    <div>
      <div>
        <el-form :model="appendlist" label-position="top" size="small" ref="appendlist" :rules="appendrules" label-width="110px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="机构名称" prop="name">
                <el-input v-model="appendlist.name" placeholder="机构名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="机构英文名称" prop="nameEn">
                <el-input v-model="appendlist.nameEn" placeholder="机构英文名称"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="机构简称" prop="shortName">
                <el-input v-model="appendlist.shortName" placeholder="机构简称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="机构代码" prop="code">
                <el-input v-model="appendlist.code" placeholder="机构代码"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="机构类别" prop="category">
                <el-select v-model="appendlist.category" clearable placeholder="机构类别" @change="selectChanged">
                  <el-option
                    v-for="item in classifyOptions"
                    :key="item.codeKey"
                    :label="item.codeName"
                    :value="item.codeKey">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="组织机构类别" prop="unitId">
                <el-select v-model="appendlist.unitId" clearable  @change="unitIdSelectChanged" placeholder="组织机构类别">
                  <el-option
                    v-for="item in unitIdOptions"
                    :key="item.type"
                    :label="item.value"
                    :value="item.type">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="机构状态" prop="status">
                <el-select v-model="appendlist.status" clearable placeholder="机构状态">
                  <el-option
                    v-for="item in typeOptions"
                    :key="item.type"
                    :label="item.value"
                    :value="item.type">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="排序号" prop="orderNo">
                <el-input v-model="appendlist.orderNo" placeholder="排序号"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="是否是临时" prop="isTemp">
                <el-select v-model="appendlist.isTemp" clearable placeholder="是否是临时">
                  <el-option
                    v-for="item in isTempOptions"
                    :key="item.type"
                    :label="item.value"
                    :value="item.type">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否隐藏" prop="isHidden">
                <el-select v-model="appendlist.isHidden" clearable placeholder="是否隐藏">
                  <el-option
                    v-for="item in HiddenOptions"
                    :key="item.type"
                    :label="item.value"
                    :value="item.type">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="企业地址" prop="address">
                <el-input v-model="appendlist.address" placeholder="企业地址"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="邮政编码" prop="zipCode">
                <el-input v-model="appendlist.zipCode" placeholder="邮政编码"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="联系电话" prop="telephone">
                <el-input v-model="appendlist.telephone" placeholder="联系电话"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电子邮件" prop="email">
                <el-input v-model="appendlist.email" placeholder="电子邮件"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="备注" prop="remarks">
                <el-input type="textarea"  v-model="appendlist.remarks" placeholder="备注"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!--<el-row :gutter="20" v-if="appendlist.category ==='1'">-->
            <!--<el-col :span="8" style="width:200px">-->
              <!--<el-form-item label="子公司归口部门" prop="belongOrgId">-->
                <!--<el-input v-model="belongOrgName" placeholder="子公司归口部门"></el-input>-->
              <!--</el-form-item>-->
            <!--</el-col>-->
            <!--<el-col :span="6" style="margin:40px">-->
                <!--<el-button size="small" type="primary" @click="handleCreate()">设置</el-button>-->
            <!--</el-col>-->
          <!--</el-row>-->
        </el-form>
      </div>
      <div class="menu-navbar">
        <el-button size="small" type="primary" @click="createSubmit('appendlist')">保存</el-button>
        <el-button size="small" type="" @click="cancelSubmit">取消</el-button>
      </div>
    </div>
  <!--归口部门设置-->
  <el-dialog
    v-if="dialogVisiblebelongOrg"
    append-to-body
    top="0"
    :close-on-click-modal="false"
    title="设置归口部门"
    :visible.sync="dialogVisiblebelongOrg"
    width="70%">
    <belongOrg :belongOrgData="appendlist.belongOrgId" @changeOrgCloseDialog="changeOrgCloseDialog" @setOrg="changeOrg($event)"></belongOrg>
  </el-dialog>
  </div>
</template>
<script>
  import belongOrg from '@/views/systemManage/commonComponents/orgSetting/belongOrg'
  export default {
    components: {
      belongOrg
    },
    props: ['orgData'],
    data() {
      return {
        dialogVisiblebelongOrg: false,
        belongOrgData: [],
        belongOrgName: '',
        classifyOptions: [],
        natureOptions: [],
        typeOptions: [
          {
            type: '0',
            value: '活动'
          },
          {
            type: '1',
            value: '禁用'
          },
          {
            type: '2',
            value: '删除'
          }
        ],
        HiddenOptions: [
          {
            type: '0',
            value: '否'
          },
          {
            type: '1',
            value: '是'
          }
        ],
        isTempOptions: [
          {
            type: '0',
            value: '否'
          },
          {
            type: '1',
            value: '是'
          }
        ],
        unitIdOptions: [],
        corpUnitIdOptions: [
          {
            type: '1',
            value: '直属单位'
          },
          {
            type: '2',
            value: '下属单位'
          }
        ],
        deptUnitIdOptions: [
          {
            type: '1',
            value: '部门'
          },
          {
            type: '2',
            value: '机关部门'
          }
        ],
        appendlist: {
          id: '',
          parentId: this.orgData.parentid,
          name: '',
          nameEn: '',
          shortName: '',
          anotherName: '',
          code: '',
          grade: this.orgData.grade,
          orderNo: '',
          type: '',
          category: '',
          nature: '',
          status: '',
          zipCode: '',
          address: '',
          email: '',
          telephone: '',
          isTemp: '',
          isHidden: '',
          remarks: '',
          belongOrgId: ''
        },
        appendrules: {
          name: [
            { message: '机构名称不能为空', required: true, trigger: 'blur' },
            { min: 0, max: 128, message: '长度在 1 到 128 个字符', trigger: 'blur' }
          ],
          nameEn: [
            { required: false, trigger: 'blur' },
            { min: 0, max: 128, message: '长度在 1 到 128 个字符', trigger: 'blur' }
          ],
          shortName: [
            { required: false, trigger: 'blur' },
            { min: 1, max: 256, message: '长度在 1 到 256 个字符', trigger: 'blur' }
          ],
          anotherName: [
            { required: false, trigger: 'blur' },
            { min: 1, max: 256, message: '长度在 1 到 256 个字符', trigger: 'blur' }
          ],
          code: [
            { required: false, trigger: 'blur' },
            { min: 1, max: 128, message: '长度在 1 到 128 个字符', trigger: 'blur' }
          ],
          grade: [
            { message: '机构等级不能为空', required: false, trigger: 'change' },
            { min: 1, max: 32, message: '长度在 1 到 32 个字符', trigger: 'blur' }
          ],
          orderNo: [
            { message: '排序号不能为空', required: true, trigger: 'change' },
            { min: 1, max: 16, message: '长度在 1 到 16 个字符', trigger: 'blur' }
          ],
          category: [
            { message: '机构类别不能为空', required: true, trigger: 'change' },
            { min: 1, max: 4, message: '长度在 1 到 4 个字符', trigger: 'blur' }
          ],
          nature: [
            { required: false, trigger: 'blur' },
            { min: 0, max: 4, message: '长度在 1 到 4 个字符', trigger: 'blur' }
          ],
          status: [
            { message: '机构状态不能为空', required: true, trigger: 'blur' },
            { min: 0, max: 1, message: '长度在 1 个字符', trigger: 'blur' }
          ],
          zipCode: [
            { required: false, trigger: 'blur' },
            { min: 0, max: 16, message: '长度在 1 到 16 个字符', trigger: 'blur' }
          ],
          address: [
            { required: false, trigger: 'blur' },
            { min: 0, max: 256, message: '长度在 1 到 256 个字符', trigger: 'blur' }
          ],
          email: [
            { required: false, trigger: 'blur' },
            { min: 0, max: 128, message: '长度在 1 到 128 个字符', trigger: 'blur' }
          ],
          telephone: [
            { required: false, trigger: 'blur' },
            { min: 1, max: 16, message: '长度在 1 到 16 个字符', trigger: 'blur' }
          ],
          isTemp: [
            { message: '是否是临时不能为空', required: true, trigger: 'change' }
          ],
          isHidden: [
            { message: '是否隐藏不能为空', required: true, trigger: 'change' }
          ],
          remarks: [
            { required: false, trigger: 'change' },
            { min: 1, max: 256, message: '长度在 1 到 256 个字符', trigger: 'blur' }
          ],
          belongOrgId: [
            { required: false, trigger: 'blur' },
            { min: 1, max: 128, message: '长度在 1 到 128 个字符', trigger: 'blur' }
          ]
        }
      }
    },
    created() {
      this.GetCodeList()
      this.GetCodeList1()
    },
    watch: {
      // 如果路由有变化，会再次执行该方法
      '$route.name': ['GetCodeList', 'GetCodeList1']
    },
    methods: {
      GetCodeList() {
        let args = {}
        args.codeType = 'ORG_CATEGORY_CODE'
        args.codeStatus = '0'

        this.$store.dispatch('SysCodeListByCodeType', args).then(res => {
          let data = res.data
          if (data && data.length > 0) {
            data.forEach((item, i) => {
              item.id = JSON.stringify({
                'id': item.codeKey,
                'name': item.codeName
              })
            })
          }
          this.classifyOptions = data
          this.loading = false
        }).catch((err) => {
          console.log(err)
        })
      },
      GetCodeList1() {
        let args = {}
        args.codeType = 'ORG_NATURE_CODE'
        args.codeStatus = '0'

        this.$store.dispatch('SysCodeListByCodeType', args).then(res => {
          let data = res.data
          if (data && data.length > 0) {
            data.forEach((item, i) => {
              item.id = JSON.stringify({
                'id': item.codeKey,
                'name': item.codeName
              })
            })
          }
          this.natureOptions = data
          this.loading = false
        }).catch((err) => {
          console.log(err)
        })
      },
      appendData() {
        this.$store.dispatch('OrgTreeInsert', this.appendlist).then(res => {
          this.$emit('listfresh')
          // this.$router.push({
          //   name: 'org'
          // })
          this.$message({
            type: 'success',
            message: '添加成功!'
          })
          this.$emit('changeCloseDialog')
        }).catch((err) => {
          console.log(err)
        })
      },
      createSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.appendData()
          } else {
            this.$message({
              type: 'danger',
              message: '添加失败!'
            })
            console.log('error submit!!')
            return false
          }
        })
      },
      cancelSubmit() {
        this.$emit('changeCloseDialog')
        // this.$router.push({
        //   name: 'org'
        // })
      },
      handleCreate() {
        this.dialogVisiblebelongOrg = true
      },
      changeOrgCloseDialog() {
        this.dialogVisiblebelongOrg = false
      },
      changeOrg(data) {
        this.belongOrgData = data
        this.appendlist.belongOrgId = data.orgId
        this.belongOrgName = data.orgName
      },
      selectChanged(val) {
        // if (val === '1') {
        //   this.appendlist.belongOrgId = ''
        // }
        this.appendlist.unitId = ''
        if (val === '1'){
          this.unitIdOptions = this.corpUnitIdOptions
        }
        if (val === '2'){
          this.unitIdOptions = this.deptUnitIdOptions
        }
      },
      unitIdSelectChanged(val){
        this.$forceUpdate()
      }
    }
  }
</script>
<style scoped>
  .menu-navbar{
    padding:0 0 20px;
    text-align: right;
  }
  .container{
    padding: 20px;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
</style>
